<template>
    <div class="box">

        <div class="left">
            <div class="leftone">
                <img src="https://heimahr.itheima.net/defaultHead.png" width="50px" height="50px">
                <p class="p">江苏传智播客教育科技股份有限公司</p>
                <p class="p2">管理员 | 传智播客-总裁办</p>

                <div class="per">
                    <span>组织总人数</span><span>正式员工</span><span>合作待签署</span><span>待入职</span><span>本月待转正</span>
                </div>
                <div class="per2">
                    <span>260</span><span>115</span><span>72</span><span>73</span><span>164</span>
                </div>

                <div class="per3">
                    <span>本月待离职</span><span>接口总访问</span>
                </div>

                <div class="per4">
                    <span>155</span><span>3310</span>
                </div>

            </div>
            <div class="leftwo">
                <p class="tu">快捷入口</p>
                <div class="tuo">
                    <img
                        src="">
                    <img
                        src="">
                    <img
                        src="">
                    <img
                        src="">
                    <img
                        src="">
                </div>
                <div class="tuo2">
                    <span>假期审批</span><span>社保管理</span><span>角色管理</span><span>添加员工</span><span>权限管理</span>
                </div>

            </div>
            <div class="leftthree">
                <p class="pin">社保申报数据</p>
                <p class="pin2">申报人数</p>
                <p class="pin3">260</p>
                <img src="../../../public/5.jpg">
                <div id="myChart" style="width: 360px;height:380px;" class="biao"></div>

            </div>
        </div>
        <div class="right">
            <div class="rightone">
                <div class="rightone1">
                    <p class="kin">帮助链接</p>
                    <div class="kin1">

                        <img
                            src="">
                        <p>入门指南</p>

                    </div>
                    <div class="kin2">
                        <img
                            src="">
                        <p>在线帮助手册</p>

                    </div>
                    <div class="kin3">
                        <img
                            src="">
                        <p>联系技术支持</p>
                    </div>
                    <div class="kin4">
                        <img
                            src="">
                        <p>添加链接</p>
                    </div>
                </div>
                <div class="rightone2">



                    <div :style="{ width: '300px', borderRadius: '4px' }">
                        <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
                    </div>
                </div>
            </div>




            <div class="righttwo">
                <p>通知公告</p>
                <div class="hk1">
                    <img src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg">
                    <p class="k1"><span style="color: #276ffb;">传智</span><span
                            style="color: #c2c2c2;">发布了</span>第一期传智大讲堂互动讨论课程获奖名单</p>
                    <div class="k2">
                        <p>2022-12-12 15:30:25</p>
                    </div>

                </div>
                <div class="hk2">
                    <img src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg">
                    <p class="k1"><span style="color: #276ffb;">传智</span><span
                            style="color: #c2c2c2;">发布了</span>第一期传智大讲堂互动讨论课程获奖名单</p>
                    <div class="k2">
                        <p>2022-12-12 15:30:25</p>
                    </div>
                </div>
                <div class="hk3">
                    <img src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg">
                    <p class="k1"><span style="color: #276ffb;">传智</span><span
                            style="color: #c2c2c2;">发布了</span>第一期传智大讲堂互动讨论课程获奖名单</p>
                    <div class="k2">
                        <p>2022-12-12 15:30:25</p>
                    </div>
                </div>


            </div>


        </div>

    </div>
</template>

<script lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { Dayjs } from 'dayjs';
export default {
    setup() {
        const chartInstance: any = ref(null);
        onMounted(() => {
            const myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [0, 50, 160, 100, 40, 280, 100],
                        type: 'line'
                    }
                ]
            });
            chartInstance.value = myChart;
        });
    },
};

const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
    console.log(value, mode);
};



</script>

<style scoped>
/* .body{
    background: #f5f6f8;  
} */
.box {
    width: 100%;
    height: 700px;
    background: #f5f6f8;
}

.left {
    float: left;
    width: 49%;
    height: 100%;
    background: #f5f6f8;
}

.right {
    float: left;
    width: 49%;
    height: 100%;
    background: #f5f6f8;
    margin-left: 1%;
}

.leftone {
    width: 100%;
    height: 280px;
    /* background: yellow;  */
    background: white;
}

.leftwo {
    width: 100%;
    height: 150px;
    background: white;
    margin-top: 10px;
}

.leftthree {
    width: 100%;
    height: 300px;
    background: white;
    margin-top: 10px;
}

.p {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
}

.leftone img {
    float: left;
    margin-left: 20px;
}

.p2 {
    float: left;
    margin-left: -255px;
    margin-top: 26px;
    font-size: 14px;
    color: #697086;
}

.per span {
    /* float: left; */
    margin-left: 35px;
}

.per {
    float: left;
    margin-left: -75px;
    margin-top: 40px;
}

.per2 {
    float: left;
    margin-left: -10px;
    margin-top: 15px;
}

.per2 span {
    /* float: left; */
    margin-left: 58px;
    font-size: 28px;
}

.per3 span {
    /* float: left; */
    margin-left: 35px;
}

.per3 {
    float: left;
    /* margin-left: 2px; */
    margin-top: 40px;
}

.per4 {
    float: left;
    margin-left: -240px;
    margin-top: 70px;
}

.per4 span {
    /* float: left; */
    margin-left: 58px;
    font-size: 28px;
}

.tu {
    float: left;
    margin-left: 40px;
    margin-top: 20px;
}

.leftwo img {
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 50px;
    margin-top: 50px;
}

.tuo {
    float: left;
    margin-left: -115px;
    margin-top: 8px;
}

.tuo2 {
    float: left;
    margin-left: -2px;
    margin-top: 8px;
}

.tuo2 span {
    float: left;
    margin-left: 35px;
}

.pin {
    float: left;
    margin-left: 30px;
    margin-top: 10px;
}

.pin2 {
    float: left;
    margin-left: -95px;
    margin-top: 45px;
}

.pin3 {
    float: left;
    margin-left: -95px;
    margin-top: 85px;
    color: #04c9be;
    font-size: 28px;
}

.leftthree img {
    width: 230px;
    height: 155px;
    float: left;
    margin-left: -98px;
    margin-top: 140px;
}

.biao {
    float: left;
    margin-left: 280px;
    margin-top: -330px;
}

.rightone {
    width: 100%;
    height: 350px;
    background: #f5f6f8;
}

.rightone1 {
    width: 48%;
    height: 350px;
    background: white;
    float: left;
}

.rightone2 {
    width: 48%;
    height: 350px;
    background: white;
    margin-left: 2%;
    float: left;
}

.kin {
    float: left;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 18px;
}

.kin1 {
    float: left;
    background: #f5f6f8;
    width: 240px;
    height: 50px;
    margin-top: 60px;
    margin-left: -68px;
}

.kin2 {
    float: left;
    background: #f5f6f8;
    width: 240px;
    height: 50px;
    margin-top: 15px;
    margin-left: 24px;
}

.kin3 {
    float: left;
    background: #f5f6f8;
    width: 240px;
    height: 50px;
    margin-top: 15px;
    margin-left: 24px;
}

.kin4 {
    float: left;
    background: #f5f6f8;
    width: 240px;
    height: 50px;
    margin-top: 15px;
    margin-left: 24px;
}

.kin1 img {
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 15px;
    margin-left: 24px;
}

.kin1 p {
    float: left;
    margin-top: 17px;
    margin-left: 10px;
}

.kin2 img {
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 15px;
    margin-left: 24px;
}

.kin2 p {
    float: left;
    margin-top: 17px;
    margin-left: 10px;
}

.kin3 img {
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 15px;
    margin-left: 24px;
}

.kin3 p {
    float: left;
    margin-top: 17px;
    margin-left: 10px;
}

.kin4 img {
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 15px;
    margin-left: 24px;
}

.kin4 p {
    float: left;
    margin-top: 17px;
    margin-left: 10px;
}


.righttwo {
    width: 100%;
    height: 350px;
    /* background: rgb(47, 193, 255); */
    background: white;
    margin-top: 10px;
}

.righttwo p {
    float: left;
    margin-left: 20px;
    margin-top: 10px;
}

.hk1 {
    width: 440px;
    height: 80px;

    float: left;
    margin-top: 50px;
    margin-left: -60px;
}

.hk2 {
    width: 440px;
    height: 80px;

    float: left;
    margin-top: 145px;
    margin-left: -440px;
}

.hk3 {
    width: 440px;
    height: 80px;

    float: left;
    margin-top: 245px;
    margin-left: -440px;
}

.hk1 img {
    width: 30px;
    height: 30px;
    float: left;
    margin-top: 5px;
}

.hk2 img {
    width: 30px;
    height: 30px;
    float: left;
    margin-top: 5px;
}

.hk3 img {
    width: 30px;
    height: 30px;
    float: left;
    margin-top: 5px;
}

.k1 {
    /* color: #276ffb; */
    float: left;
    margin-top: -12px;
    margin-left: -5px;
}

.k2 {
    /* color: #276ffb; */
    float: left;
    margin-top: -12px;
    margin-left: 30px;
}

.k2 p {
    color: #c2c2c2;
}
</style>